<script lang="ts" setup>
//行为 
const clickBtn = () => {
  alert('点击了按钮')
}

const onMouseEnter = () => {
  alert('鼠标进入')
}

const onMouseLeave = () => {
  alert('鼠标按下')
}

</script>

<template>
  <!-- template类似鸿蒙组件的build（）函数，用于构建界面 -->
 <button @click="clickBtn">按钮</button>
 <div class="box" @mouseenter="onMouseEnter "  @mouseleave="onMouseLeave">鼠标移入移出</div>
</template>

<style scoped>
/* 样式 类似鸿蒙组件的style（）函数，用于定义样式 */
/* scoped 告诉编译器，这个样式只对当前组件生效，避免样式冲突 */
.box{
  width: 100px;
  height: 100px;
  background-color: blueviolet;
}
</style>